<template>
  <div>
    <button type="button" @click="getPdf('#pdfDom','程加丽')">导出PDF</button>
    <div class="hello">
      <div class="info" id="pdfDom">
        <div class="title">个人简历</div>
        <div class="bgImg">
          <span class="font">基本信息</span>
          <img class="img" src="../assets/bg.png" alt="" />
        </div>
        <div class="header">
          <div
            class="header-item"
            v-for="(item, index) in clayHeadDetail"
            :key="index"
          >
            <div>
              <span>{{ item.title }}</span
              >：<span>{{ item.val }}</span>
            </div>
          </div>
        </div>
        <!-- 专业技能 -->
        <div class="bgImg mt">
          <span class="font">专业技能</span>
          <img class="img" src="../assets/bg.png" alt="" />
        </div>
        <div class="skill box">
          <div v-for="(item, index) in claySkillList" :key="index">
            <span>{{ index + 1 }}&#8197;)</span>
            <span>&#8194;{{ item }}</span>
          </div>
        </div>
        <!-- 项目经验 -->
        <div class="bgImg mt">
          <span class="font">项目经验</span>
          <img class="img" src="../assets/bg.png" alt="" />
        </div>
        <div class="projects">
          <div class="box" v-for="(item, index) in clayProjects" :key="index">
            <div class="flex center">
              <div class="projects-title">
                项&#32;目&#32;{{ (index + 1) | clayToChinese }}&#160;：
              </div>
              <div style="font-size: 20px; font-weight: bold; color: #553131">
                {{ item.title }}
              </div>
            </div>
            <div class="flex center mt-sm">
              <div class="projects-title">相关技术：</div>
              <div>
                {{ item.art }}
              </div>
            </div>
            <div class="mt-sm flex center">
              <div class="projects-title">项目简介：</div>
              <div style="flex: 1">
                {{ item.intro }}
              </div>
            </div>
            <div class="mt-sm flex-sp">
              <div class="projects-title">项目描述：</div>
              <div class="describe">
                <div v-for="(items, idx) in item.describe" :key="idx">
                  <div class="flex">
                    <div>{{ idx + 1 }}.&#8194;{{ items }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="flex-sp" v-if="item.harvest != ''">
              <div class="projects-title">项目收获：</div>
              <div class="describe">
                <div v-for="(items, idx) in item.harvest" :key="idx">
                  <div>{{ idx + 1 }}.&#8194;{{ items.issue }}</div>
                  <div class="mt-sm mb-sm">解决：{{ items.solve }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 工作经验 -->
        <div class="bgImg mt">
          <span class="font">工作经验</span>
          <img class="img" src="../assets/bg.png" alt="" />
        </div>
        <div class="works">
          <div class="box">
            <div class="mt-sm" v-for="(item, index) in clayWorks" :key="index">
              <div class="works-title">{{ item.time }}</div>
              <div class="mt-sm" v-for="(items, idx) in item.list" :key="idx">
                ♢&#8194;{{ items }}
              </div>
            </div>
          </div>
        </div>
        <!-- 自我评价 -->
        <div class="bgImg mt">
          <span class="font">自我评价</span>
          <img class="img" src="../assets/bg.png" alt="" />
        </div>
        <div class="box" style="color: #000">
          <div class="mt-sm" v-for="(item, index) in claySelf" :key="index">
            ♢&#8194;{{ item }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      htmlTitle: "程加丽的简历",
      clayHeadDetail: [
        //基本信息
        { title: "姓名", val: "程加丽" },
        { title: "年龄", val: "24岁" },
        { title: "电话", val: "18715782562" },
        { title: "邮箱", val: "1162728265@qq.com" },
        { title: "现居地", val: "成都市" },
        { title: "教育经历", val: "重庆工商大学--工商企业管理--本科" },
        { title: "求职意向", val: "web前端工程师" },
      ],
      claySkillList: [
        //专业技能
        "熟悉W3C标准和Web语义化，DIV+CSS布局的HTML代码编写，熟悉流式布局，响应式布局和弹性布局。",
        "熟悉JavaScript，包括ES5和ES6特性；熟悉面向对象编程思想，包括闭包、继承、原型、多态；熟悉DOM、BOM操作；能够熟练应用AJAX异步请求，熟悉HTTP协议与跨域问题。",
        "熟练使用ES6语法编程",
        "熟悉HTML5、CSS3新特性，能运用新特性编写兼容主流浏览器的页面布局。",
        "熟悉VUE框架，了解VUE相关组件库，如ElementUI、mintUI。",
        "熟悉Git管理代码。",
      ],
      clayProjects: [
        //项目经验
        {
          title: "潇湘暮雨",
          art: "HTML、CSS、JavaScript、Element-Ui、axios、VUE、Node.js、MySQL",
          intro:
            "该项目为小说网站，是一个女性原创小说网站，有玄幻、现言、古言、青春、悬疑五个小说类型，用户注册后登录网站，可以将图书加入个人书架，个人中心修改个人信息。", //项目简介
          describe: [
            //责任描述
            "编写用户登录、注册页面，使用正则表达式结合vue框架双向绑定验证用户输入的正确性",
            "负责图书总列表和单个图书详情页，使用axios动态获取数据，完成页面数据交互",
            "使用jQuery实现图片轮播",
            "采用vue组件化开发，组件间路由跳转、各组件之间参数传递等实现MVVM单页面应用",
          ],
          harvest: [
            //项目收获
            {
              issue: "vue组件间跳转后不能回到页面顶部",
              solve:
                "在mian.js中添加router.afterEach方法，方法中定window.scrollTo(0,0)，这样就能在组件跳转后回到页面顶部",
            },
            {
              issue:
                "在做放大镜的时候，给元素绑定mouseove事件，移入后子元素会秒触发离开与进入事件，图片会闪动",
              solve:
                "只要给闪动的元素添加css样式pointer-event：none，解除鼠标事件，就能解决闪动问题",
            },
            {
              issue: "完成用户注册功能时，使用post请求，后端接收不到数据",
              solve:
                "因为post传参是formdata形式，就需要在mian.js加入qs方法，并加入到vue原型对象中，并设置请求头，发送参数前调用qs.stringify方法，这样后端就能接收到传递的数据",
            },
            {
              issue:
                "使用vuex保存多个组件中使用的属性时，页面刷新后保存的属性会丢失",
              solve:
                "这是vuex的缺点，动态在state中保存的属性，页面刷新后会回到初始值，需要结合着localStorng使用，可以永久保存",
            },
          ],
        },
        {
          title: "仿识货",
          art: "HTML、CSS、vue、javascript",
          intro: "识货中含有每日推送运动、潮流、生活、时尚等方面网购资讯", //项目简介
          describe: [
            //责任描述
            "使用mint-ui完成页面的设计",
            "完成登录注册页面的设计与功能的实现",
          ],
          harvest: [
            //项目收获
            {
              issue:
                "页面有数据是在页面滚动时会向后端发送请求，获取相应数据，页面每滚动一次就会向后端发送请求。如果用户一直滚动会一直向服务器发送请求，会造成网络负担",
              solve:
                "为页面绑定事件，使用周期性定时器实现防抖效果，在用户滚动时不发送请求，在用户停止滚动页面相应时间后再向后端发送请求，获取数据",
            },
            {
              issue: "Mint-ui中navbar组件不能设置字体大小",
              solve:
                "在tab-item中定义html元素span包裹导航字，就可以设置字体大小和其他样式",
            },
          ],
        },
        {
          title: "三江校园(微信小程序)",
          art: "vue",
          intro: "服务与校园的综合类微信小程序", //项目简介
          describe: [
            //责任描述
            "兼职模块、校友圈(类似于贴吧),主要目的便于学生实时接收校内信息,提供勤工俭学的渠道,以及增强校园各类活动的文化氛围",
            "运用uniapp混编进行开发",
            "使用uView组件框架进行页面的布局",
            "封装自定义接口请求方法,对返回的不同状态码进行操作",
          ],
          harvest: [],
        },
        {
          title: "熊猫校园(微信小程序)",
          art: "vue",
          intro:
            "业务单一的校园兼职类小程序,满足基本的领取任务、上传凭证、任务结算", //项目简介
          describe: [
            //责任描述
            "运用uniapp混编进行开发",
            "使用uView组件框架进行页面的布局",
            "封装自定义接口请求方法,对返回的不同状态码进行操作",
          ],
          harvest: [],
        },
      ],
      clayWorks: [
        //工作经验
        {
          time: "2020.6---至今 成都天鹜文化传媒有限公司",
          list: [
            "负责小程序端 简单的UI设计、页面编写、接口对接",
            "前后端接口文档交流与设计",
          ],
        },
        {
          time: "2019.11---2020.5 苏州云码信息科技有限公司",
          list: [
            "负责公司产品web前端功能设计、开发和实现",
            "根据ui的设计，利用html和css完成合理的页面布局与后端、设计相互配合，确保项目进度",
            "优化产品界面，提供良好的用户体验",
            "与后端工程师配合，完成后台的数据交互",
          ],
        },
      ],
      claySelf: [
        //自我评价
        "本人忠实诚信，讲原则，说到做到，决不推卸责任;有自制力，做事情始终坚持有始有终，从不半途而废；肯学习，有问题不逃避，愿意虚心向他人学习。",
        "抗压能力较强，有较强的组织、执行能力和团体协作精神，能迅速的适应各种环境，并融合其中。",
        "能够适应加班，接受出差。",
      ],
    };
  },
  filters: {
    clayToChinese: (section) => {
      var chnNumChar = [
        "零",
        "一",
        "二",
        "三",
        "四",
        "五",
        "六",
        "七",
        "八",
        "九",
      ];
      var chnUnitSection = ["", "万", "亿", "万亿", "亿亿"];
      var chnUnitChar = ["", "十", "百", "千"];
      var strIns = "",
        chnStr = "";
      var unitPos = 0;
      var zero = true;
      while (section > 0) {
        var v = section % 10;
        if (v === 0) {
          if (!zero) {
            zero = true;
            chnStr = chnNumChar[v] + chnStr;
          }
        } else {
          zero = false;
          strIns = chnNumChar[v];
          strIns += chnUnitChar[unitPos];
          chnStr = strIns + chnStr;
        }
        unitPos++;
        section = Math.floor(section / 10);
      }
      return chnStr;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mt {
  margin-top: 40px;
}
.flex {
  display: flex;
  justify-content: left;
}
.flex-sp {
  display: flex;
  justify-content: space-between;
}
.center {
  align-items: center;
}
.mt-sm {
  margin-top: 10px;
}
.mb-sm {
  margin-bottom: 10px;
}
.box {
  margin-top: 20px;
  margin-left: 15px;
}
.hello {
  margin-top: 60px;
  background: #fff;
  display: flex;
  justify-content: center;
  color: #553131;
}
.title {
  text-align: center;
  font-size: 33px;
}
.info,#pdfDom {
  width: 700px;
  padding-bottom: 100px;
}
.bgImg {
  position: relative;
}
.font {
  position: absolute;
  color: #fff;
  font-size: 24rpx;
  line-height: 28px;
  left: 50px;
}
.img {
  width: 650px;
  height: 28px;
}
.header {
  margin-top: 20px;
  margin-left: 15px;
  font-size: 17px;
  font-weight: 550;
  color: #000;
}
.header-item :nth-child(odd) {
  margin-top: 8px;
  margin-bottom: 8px;
}
.header-item:last-child {
  color: #5b3a1b;
  text-decoration: underline;
}
.skill {
  color: #000;
  font-size: 17px;
}
.skill :nth-child(odd) {
  margin-top: 8px;
  margin-bottom: 8px;
}
.projects {
  color: #000;
  font-family: "Microsoft YaHei";
}
.describe {
  flex: 1;
}
.describe :nth-child(odd) {
  margin-bottom: 4px;
}
.projects-title {
  width: 100px;
  font-size: 18px;
}
.works {
  color: #000;
}
.works-title {
  font-weight: bold;
  font-size: 18px;
}
</style>
